﻿{extend name="public:base" /}


{block name="css"}
<link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css"/>
<link rel="stylesheet" type="text/css" href="__ADMIN__/css/style.css">

<style>
    layui-progress-big, .layui-progress-big .layui-progress-bar {
        height: 30px;
        line-height: 30px
    }

    .layui-progress {
        position: relative;
        height: 30px;
        border-radius: 20px;
        background-color: #eee;
    }

    .layui-progress-text {
        position: relative;
        top: -20px;
        line-height: 30px;
        font-size: 12px;
        color: #666;
    }

    .webuploader-pick {
        width: 120px;
        background: #1ab394;
        padding: 9px 0;
        font-size: 13px;
    }

    .webuploader-pick-hover {
        background: #19A689;
    }

</style>{/block}


{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <form method="post">
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">名称</label>
                                <div class="col-sm-3">
                                    <input type="text" required class="form-control" name="name" placeholder="请输入名称" value="{$info.name}">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row layui-form">
                                <label class="col-sm-1 col-form-label">所属分类</label>
                                <div class="col-sm-3">
                                    <select name="type_id">
                                        <option value="0">请选择所属分类</option>
                                        {volist name="type_list" id="vo"}
                                        <option value="{$vo.id}" {$vo.id == $info['type_id'] ? 'selected' : ''}>{$vo.name}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row"><label class="col-sm-1 col-form-label">封面图</label>
                                <div class="col-sm-6">
                                    <input type="file" id="img_file" accept="image/*" style="display: none">
                                    <input type="hidden" class="hidden_value" name="img" id="img" value="{$info['img']|default=''}"/>
                                    <div class="btn btn-w-m btn-primary" onclick="uploadImage('img_file', 'img', 'form-uploaded-box-single', false, 1)">原图上传</div>
                                    <div class="btn btn-w-m btn-primary" onclick="openCrop('form-uploaded-box-single', 1)">裁剪上传</div>

                                    <div class="form-uploaded-box" id="form-uploaded-box-single" style="width: 140px">
                                        {if $info.img}
                                        <div class="form-uploaded-img-box">
                                            <img class="form-uploaded-box-img" src="{:getPicture($info.img)}" data-id="{$info.img}">
                                            <i class="form-uploaded-img-preview iconfont icon-yulan" onclick="previewImg(this, 'form-uploaded-img-preview')"></i>
                                            <i class="form-uploaded-img-del iconfont icon-close" onclick="delImage(this, 'cropper_uploaded_img_ids', 'cropper_uploaded_img_paths', 'form-')"></i>
                                        </div>
                                        {/if}
                                    </div>
                                </div>

                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">价格</label>
                                <div class="col-sm-3">
                                    <input type="text" required class="form-control" name="price" placeholder="请输入价格" value="{$info.price}">
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">简介</label>
                                <div class="col-sm-3">
                                    <textarea class="form-control" name="des" rows="8">{$info.des}</textarea>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="row">
                                <label class="col-sm-1 col-form-label">基本信息</label>
                                <div class="col-lg-6">
                                    <div class="ibox">
                                        <textarea id="editor_id1">{$info.basic_des}</textarea>
                                        <textarea name="basic_des" style="display: none"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="row">
                                <label class="col-sm-1 col-form-label">价格说明</label>
                                <div class="col-lg-6">
                                    <div class="ibox">
                                        <textarea id="editor_id2">{$info.price_des}</textarea>
                                        <textarea name="price_des" style="display: none"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="row">
                                <label class="col-sm-1 col-form-label">预定须知</label>
                                <div class="col-lg-6">
                                    <div class="ibox">
                                        <textarea id="editor_id3">{$info.reserve_des}</textarea>
                                        <textarea name="reserve_des" style="display: none"></textarea>
                                    </div>
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>
                        </div>


                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                                <button type="button" class="btn btn-w-m btn-primary ajax-post-form">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="js"}
<script src="__STATIC__/layui/layui.js"></script>
<script type="text/javascript" src="__PLUG__/kindeditor/kindeditor-all.js"></script>
<script>
    // 初始化KindEditor富文本编辑器
    function initKindEditor(editor_id, width = 710, height = 500, items = ['source', 'undo', 'redo', '|', 'preview', 'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright', 'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'clearhtml', '|', 'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold', 'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'link', 'unlink', '|', 'fullscreen']) {
        if (!editor_id) {
            layer.close();
            layer.msg('调用initKindEditor方法缺少富文本ID参数');
            return;
        }

        // 使用 editor_id 作为窗口的唯一标识
        KindEditor.ready(function (K) {
            // 将每个编辑器实例保存在 window.editor 中，以便于后续使用
            window['editor_' + editor_id] = K.create('#' + editor_id, {
                width: width,
                height: height,
                items: items
            });
        });
    }


    // 初始化每个编辑器并保存实例
    initKindEditor('editor_id1');
    initKindEditor('editor_id2');
    initKindEditor('editor_id3');

    // 表单提交
    $('.ajax-post-form').click(function () {
        // 加载层
        var index = layer.load(2, {shade: [0.2, '#000']});

        var action = $(this).parents().attr("action");
        var url = (action && action.slice(0, 1) === '/') ? action : (action || window.location.href);

        // 在提交前同步编辑器内容到 textarea
        window['editor_editor_id1'].sync();
        window['editor_editor_id2'].sync();
        window['editor_editor_id3'].sync();

        // 将富文本中的内容赋值到 textarea 隐藏域中以供表单提交
        $('textarea[name="basic_des"]').val(window['editor_editor_id1'].html());
        $('textarea[name="price_des"]').val(window['editor_editor_id2'].html());
        $('textarea[name="reserve_des"]').val(window['editor_editor_id3'].html());

        var formData = $('form').serialize();
        $.post(url, formData, function (res) {
            if (res.result == 1) {
                setTimeout(function () {
                    window.location.href = res.url;
                }, res.timer);
            } else if (res.result == 2) {
                layer.close(index);
                layer.msg(res.msg);
            }
        }, 'json');

        setTimeout(function () {
            layer.close(index);
        }, 3000);

        return false;
    });



</script>
{/block}